<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>能效管理</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" href="${path}/resource/css/gzfx.css">
	
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>

	<script type="text/javascript"></script>
	<style>
		.foot-div1{
			display:block;
		}
		.right-content{
				background: none;
		   	 border:none;
		    box-shadow: none;
		}
		    
		.img-qbsb{background:url()}
		/*主图表的顶部图*/
		.top-img{height:50%;width:100%;}
			.left-img{width:80%;height:100%;float:left;padding:2% 2%}
				.left-img>div{width:100%;height:100%;border-radius:5px;background:#dee3ec}
					.left-img>div>div{height:100%}
			.right-img{width:20%;height:100%;float:right;padding:2% 2%}
				.right-img>div{width:100%;height:100%;border-radius:5px;background:#dee3ec}
					
		.sssj-img-wapper{height:50%;width:100%;position:relative;padding: 10px 15px;}
		/*主表电量统计*/
		.dayCost{position:absolute;left:2%;top:30%;font-size:15px;color:#48f2ff}
		.monthCost{position: absolute;right: 25%;top: 20%;font-size: 15px;color: #48f2ff;border-left: 1px solid #337ab7;height: 60%;display: flex;justify-content: center;flex-direction: column;padding-left: 25px;}
		/*身份信息*/
		/* .equip-msg>div>div{padding-top:0}
		.equip-msg{padding: 2%;}
		.equip-msg>.equip-msg-bg{text-align: initial;display:block;height:100%;margin: 0;}
			.equip-msg-bg>h3{margin:0;font-size:2rem;padding: 7px;}
			.equip-msg-bg>div>div{padding-top:10px} */
		.echarts-msg-bg{height:calc(100% - 25px);width:100%}
		#locationMap{display:block}
		/*隐藏地图版权信息*/
		.anchorBL{display:none;}
		/*主表盒子*/
		.top-box{height:100%;padding-top: 10px;padding-bottom: 10px;}
		.top-box>div{height:100%;border-radius:5px;background:rgba(0,0,0,0.1);border: 1px solid #337ab7;box-shadow: 0px 0px 8px #3399b7;border-top-right-radius: 5px;border-top-left-radius: 5px;}
		.top-box>div>div{padding-top:1%;padding-bottom:1%;}
		.top-box h3{margin:0;color:#337ab7;}
		.top-box img{}
		.sssj-img-wapper>div{height:calc(100% - 25px);border-radius:5px;width:97%}
		/*foot0  */
		.foot-div1>div{display:block;}
		.foot-div2{display:block}
		.foot-div2>div{display:block;}
		.foot-div3>div{display:block;position:relative}
		.show-report{position:absolute;right: 2%;top: 4%;background:linear-gradient(to bottom, rgba(4, 188, 236, 0.6) 0%,rgba(255, 255, 255, 0.1) 50%,rgba(255, 255, 255, 0) 51%,rgba(4, 188, 236, 0.6) 100%);color:#fff;padding:1px 10px;display:block;border:1px solid #3399b7;border-radius:3px}	
		/*search*/
		.search-span{background: linear-gradient(to bottom, #337ab7 0%,rgba(255, 255, 255, 0.1) 51%,rgb(128, 209, 238) 100%);
    				border-top-right-radius: 5px;
    				border-bottom-right-radius: 5px;}	
		/*社会贡献值*/
		.shgxz{height:calc(100% - 30px);}
		.shgxz>div{display:inline-block;width:32.3%;height:50%;text-align:center;color:#fff;font-size:10px}
		.font-color1{color:#33b7ad;font-weight:800;font-size:11px}
		/*电进度条*/
		.flex-progress{height:22%}
		.progress{height:100%}
		.ding{display:inline-block;width: 72%;vertical-align: middle;background:none;margin-bottom:0}
		.ding>.progress-bar{border-top-right-radius:20px;border-bottom-right-radius:20px;background: linear-gradient(to right, rgba(255,255,255,0) 0%,#3a8fd8 100%);}
		.money{display:inline-block;width: 77%;vertical-align: middle;background:none;margin-bottom:10px}
		.money>.progress-bar{position:relative;border-top-right-radius:20px;border-bottom-right-radius:20px;background: linear-gradient(to right, rgba(255,255,255,0) 0%,#3399b7 100%);}
		.money>.progress-bar::after{content:'';position:absolute;background:url(${path}/resource/images/moneya.png);background-size:100% 100%;width:22px;height:100%;top:0;right:0 }
		/*能效分析*/
		.nxfx-div1{float:left;width:50%;height:100%}
		.nxfx-div2{float:right;width:50%;height:100%;padding:20px}
			.fxbg{background:url(${path}/resource/images/nxfxbg.png);background-size:100% 100%;width:100%;height:100%;padding: 10px 15px;font-size:13px}
		/*弹窗*/
		.layer{position:absolute;top:0;width:100%;height:100%;left:0;background:url(${path}/resource/images/qbsbbg.png);background-size:100% 100%;z-index:100;display:none}
			.layer-bg{position:absolute;width:50%;height:500px;top:0;bottom:0;left:0;right:0;margin:auto;color:#fff;}				
		       .layer-head{border: 1px solid #337ab7;letter-spacing: 3px;color:#fff;height:50px;line-height:50px;font-size:2rem;padding:0 30px;border-top-right-radius: 5px;border-top-left-radius: 5px;}
			   		.layer-head::after{top:20px}
			   		.layer-head>a{cursor: pointer;height: 30px;display: inline-block;width: 40px;text-align: center;float: right;position: relative;right: -10px;top: 11px;line-height: 25px;font-size: 30px;}
			   		.layer-head>a:hover{color:#3399b7;}
			   .layer-body{border: 1px solid #337ab7;padding:30px 40px;height:90%;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;color:#333;background: rgba(238, 238, 238, 0.3);}
			   .layer-body2{border: 1px solid #337ab7;padding:30px 40px;height:90%;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;color:#333;background: rgba(238, 238, 238, 0.3);text-align:center;padding-top: 150px}
			   .layer-body3{border: 1px solid #337ab7;padding:30px 40px;height:90%;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;color:#333;background: rgba(238, 238, 238, 0.3);text-align:center;padding-top: 150px}
					.layer-msg{width:50%;float:left;height:95%;border-right: 2px solid #3399b7;}
					.layer-analyse{width:50%;float:right;height:100%;}
				 		.analyse-img{margin:10px;height:50%;border-bottom:2px dotted #3399b7}
				 	    .analyse-span{margin:10px;height:40%;}
		/*search*/
/* 		.search-span{background: linear-gradient(to bottom, #337ab7 0%,rgba(255, 255, 255, 0.1) 51%,rgb(128, 209, 238) 100%);border-top-right-radius: 5px;border-bottom-right-radius: 5px;} */
   		.layer-search{ display: flex;justify-content: space-between;align-items: center;background: rgb(16, 79, 130);padding: 10px;border-top-right-radius: 5px;border-top-left-radius: 5px}
		.search-msg{font-size:16px}
		.layer-main .input-group{width:200px;box-shadow: 0px 0px 19px #43acdb;}
		/*layer表格  */ 
		.layer-main{border: 1px solid #2196F3;border-radius: 5px;}
		.layer .layer-table>tbody>tr:nth-of-type(even){background:rgba(228, 235, 241, 0.3);}
		.layer .layer-table>tbody>tr:nth-of-type(odd){background:none}
		.div-table2{height: 230px;overflow-y: auto;cursor:pointer}
		.layer-table td{color: #fff;font-size:16px}
		.layer-table th{font-size:16px}
		.consignee{border: 1px solid #2196F3;width: 100%;margin-top:20px;border-radius:5px;font-size:20px;line-height:39px;height:40px}
		
		.c-name{width: 20%;background: rgb(16, 79, 130);float: left;border-radius: 5px ;text-align: center;color: #48f2ff}
		.c-names{width: 80%;float: left;padding-left: 20px}
		.sure-btn{float: right; padding-top:20px}
		.sure-btn >span{cursor: pointer;margin-left:20px;letter-spacing: 20px;padding-left: 20px;line-height: 30px;font-size: 18px;border: 1px solid #165282;color: #fff;border-radius: 5px;}
		.selected{background:#2196F3 !important; }
		.sending{
	   		animation: myfirst 5s linear 0s infinite normal;
			/* Firefox: */
			-moz-animation: myfirst 5s linear 0s infinite normal;
			/* Safari 和 Chrome: */
			-webkit-animation: myfirst 5s linear 0s infinite normal;
			/* Opera: */
			-o-animation: myfirst 5s linear 0s infinite normal;
	   	}
	   	@keyframes myfirst{
	   		0%   {transform:rotate(0deg);}
			100% {transform:rotate(359deg);}
	
	   	}
	</style>
</head>
<body>
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    
    <!-- 右侧内容区域 -->
    <div class="right-content container-fluid ">
    	<div class="row">
    		<!-- 主要图表区域 -->
	    	<div class="main-data col-xs-9">
	    		<!--头部nav-->
	    		<div class="row right-nav">
	    			<div class=" center" style="padding-right:40px">
	    				<a class="color-m1" href="${path}/manage/redirect/allEquip/allEquipList">
	    					<img src="${path}/resource/images/back3.png">
	    				</a>
	    			</div>
	    			<div class=" center nav-hover">
	    				<a class="color-m1" href="${path}/manage/redirect/allEquip/nowEquip?serialNum=${serialNum}">
	    				<img src="${path}/resource/images/sssj3.png">
	    				运行状态
	    				</a>
	    			</div>
	    			<div class=" center nav-hover">
	    				<a class="color-m1" href="${path}/manage/redirect/allEquip/faultAnalysis?serialNum=${serialNum}">
	    				<img src="${path}/resource/images/gzfx3.png">
	    				故障分析
	    				</a>
	    			</div>
	    			<div class=" center nav-select">
	    				<a class="color-m2" href="${path}/manage/redirect/allEquip/energyEfficiency?serialNum=${serialNum}">
	    				<img src="${path}/resource/images/nxgl2.png">
	    				能效分析
	    				</a>
	    			</div>
	    			<div class=" center nav-hover">
	    				<a class="color-m1" href="${path}/manage/redirect/allEquip/healthControl?serialNum=${serialNum}">
	    				<img src="${path}/resource/images/jkgl3.png">
	    				健康管理
	    				</a>
	    			</div>
	    			<div class=" center nav-hover">
	    				<a class="color-m1" href="${path}/manage/redirect/allEquip/historyEquip?serialNum=${serialNum}">
	    				<img src="${path}/resource/images/lssj3.png">
	    				历史数据
	    				</a>
	    			</div>
	    			
	    			<div class=" right nav-over padding-r-1">	    				
	    				<div class="color-w">当前设备:${serialNum}</div>
	    			</div>
	    			
	    		</div>
	    		<!-- 主图表 -->
	    		<div class="main-img">
	    			<div class="top-img">	    				
    					
	    				
		    			<div class="col-xs-4  top-box">
			    			<div>
			    				
		    					<div class="point foot-name ">社会贡献值</div>	
		    					<div class="shgxz"> 						    						    				
				    				<div>
				    					<img alt="" src="${path}/resource/images/cojp2.png"> <br>CO2减排<span class="font-color1"> <br><span id="coSave">100</span>t</span>
				    				</div>
				    				<div>
				    					<img alt="" src="${path}/resource/images/tfcjp2.png"> <br>碳粉尘减排 <span class="font-color1"><br><span id="tinySave">100</span>t</span>
				    				</div>
				    				<div>
				    					<img alt="" src="${path}/resource/images/hdjs2.png"> <br>耗电节省<span class="font-color1"> <br><span id="electSave">100</span>kWh</span>
				    				</div>
				    				<div>
				    					<img alt="" src="${path}/resource/images/rmjs2.png"> <br>燃煤节省 <span class="font-color1"><br><span id="coalSave">100</span>t</span>
				    				</div>
				    				<div>
				    					<img alt="" src="${path}/resource/images/sojp2.png"> <br>SO2减排 <span class="font-color1"><br><span id="soSave">100</span>t</span>
				    				</div>
				    				<div>
				    					<img alt="" src="${path}/resource/images/dxzs2.png"> <br>等效植树 <span class="font-color1"><br><span id="treeSave">100</span>棵</span>
				    				</div>
			    				</div>	   
			    			</div>
			    		</div>
		    			
		    			
	    				<div class="col-xs-4  top-box">
			    			<div>
			    				<div class="point foot-name ">当前电量(kW)</div>
			    				<div class="echarts-msg-bg" >
			    					<div id="PowerTodayEcharts" style="width:100%;height:100%;float:left"></div>
<%-- 			    					<img src="${path }/resource/images/jietu1.png" style="width:100%"> --%>
			    				</div>
			    			</div>
			    		
		    			</div>
		    			
		    			<div class="col-xs-4  top-box">
		    				<div>
		    					<div class="point foot-name ">耗能对比(kWh)</div>
		    					<div class="echarts-msg-bg" style="">
		    						<div id="HaoNengEcharts" style="width:100%;height:100%;float:left"></div>
<%-- 		    						<img src="${path }/resource/images/jietu2.png" style="width:100%"> --%>
		    					</div>
			    			</div>
		    			</div>
		    			    					    					    				    			
	    			</div>
	    			
	    			
	    			<div class="sssj-img-wapper">
	    				<div>
	    					<div class="point foot-name ">电量统计</div>
		    				<div class="echarts-msg-bg" style="position:relative">

		    					<div class="dayCost" ><span style="font-size:20px" id="dayCostSum">1000</span>十万W<br>本月电量</div>
		    					<div class="monthCost"><span><span style="font-size:20px" id="monthCostSum">1000</span>十万W</span><br>本年电量</div>
			    				<div id="DayCostEcharts" style="width:70%;height:100%;float:left"></div>
			    				<div id="MonthCostEcharts" style="width:30%;height:100%;float:left"></div>

<%-- 		    					<img src="${path }/resource/images/jietu3.png" style="width:100%;height:100%"> --%>
		    				</div>
		    				
		    			</div>	  
	    			</div>
	    			
	    			
	    		</div>
	    	</div>
	    	<!-- 右侧列表 -->
	    	<div class=" col-xs-3 right-ul center">
	    		<div class="right-list">
	    			<div class="center">
			    		<div class="input-group search-input ">
					      <input id="require" type="text"  class="form-control float-r search back-m1 color-w">
					      <span class="input-group-btn search-span">
					        <button class="btn btn-default search-btn" type="button" onclick="search();"></button>
					      </span>
						</div>
						<div class="left table-head color-w">
							<span >序列号</span><span class="float-r">运行状态</span>
						</div>
						<div class="ul-div">
	
							<table id="listtable" class="table table-striped color-w">
							  
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							  <tr>
							  	<td class="left"><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413C">0181413C</a></td>
							  	<td class="right">正常</td>
							  </tr>
							 
							</table>
						</div>
					</div>
	    		</div>
	    	</div>
	    	
	    	<!-- 底部表格 -->
	    	<div class="foot-img">
	    		<div class="col-xs-4 margin-t-1 ">
	    			<div class="foot-div1  back-a  ">
	    				<div class="point foot-name ">耗电概况</div> 
	    				<div class="echarts-msg-bg" style="padding:0% 3% 2% 3%;display:flex;display: flex;justify-content: space-around;flex-direction: column;">
	    					<div class="flex-progress">	    				
			    				<img alt="" src="${path}/resource/images/dingd.png">	    				
		    					<div class="progress ding">
		    						<div id="dayMaxpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="dayMax">0kw</span>
							</div>	
							<div class="flex-progress">
								<img alt="" src="${path}/resource/images/dingd.png">	    				
		    					<div class="progress ding">
		    						<div id="monthMaxpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="monthMax">0kw</span>
							</div >
							<div class="flex-progress">
								<img alt="" src="${path}/resource/images/dingd.png">	    				
		    					<div class="progress ding">
		    						<div id="yearMaxpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="yearMax">0kw</span>
							</div >
	    				</div>
	    			</div>
	    		</div>
	    		<div class="col-xs-4 margin-t-1 ">
	    			<div class="foot-div2 back-a  "> 
	    				<div class="point foot-name ">用电计费</div>
	    				<div class="echarts-msg-bg" style="padding:0% 3% 2% 3%;display:flex;display: flex;justify-content: space-around;flex-direction: column;">
	    					<div class="flex-progress">
			    				<span class="color-w">本日</span> 				
		    					<div class="progress money">
		    						<div id="daycostpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="daycost">0元</span>
							</div>
							<div class="flex-progress">
								<span class="color-w">本月</span>	    				
		    					<div class="progress money">
		    						<div id="monthcostpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="monthcost">0元</span>
							</div>
							<div class="flex-progress">
								<span class="color-w">本年</span>    				
		    					<div class="progress money">
		    						<div id="yearcostpro" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								</div>
								<span class="m-color" id="yearcost">0元</span>
							</div>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="col-xs-4 margin-t-1 ">
	    			<div class="foot-div3 back-a  "> 
	    				<div class="point foot-name ">能效分析</div>
	    				<div class="echarts-msg-bg">
		    				
		    				<div class='nxfx-div1' id="fenxiEcharts"></div>
		    				<div class="nxfx-div2">
		    					<div class='fxbg color-w'>
			    					<span class='color-m2'>分析:</span><br>
			    					<span>能效</span><span class='color-m2' style="font-size:17px" id="jutifenxi">上升100kwh</span>
		    					</div>
		    				</div>
	    				</div>
	    			</div>
	    			<a class="show-report" id="example1" href="javascript:void(0)">生成报告</a>
	    		</div>
	    	</div>
    	</div>
    </div>
	<!--弹窗-->
	<div class="layer" style="display: none;">
		<div class="layer-bg">
			<div class="layer-head point foot-name">
				<span>报告发送:</span>
				<a class="off-layer" id='esc2'>X</a>
			</div>
			<div  class="layer-body">	
				<div class="layer-main">
					<div class="layer-search">
		     			<div class="input-group  ">
						      <input id="layerRequire" type="text"  class="form-control float-r search back-m1 color-w">
						      <span class="input-group-btn search-span"">
						        <button class="btn btn-default search-btn" type="button" onclick="layerSearch();"></button>
						      </span>
						</div>
						<label class='search-msg color-m2'><input name='identity' type='radio' value="1">按姓名</label>
						<label class='search-msg color-m2'><input name='identity' type='radio' value="1">按工号</label>
						<label class='search-msg color-m2'><input name='identity' type='radio' value="1">按联系电话</label>
					</div>
					<div class="div-table2">
		     			<table id="mailList" class='table center table-striped table-hover layer-table'>
		     				<tr class="color-m2 " >
		     					<th class="text-center">姓名</th>
		     					<th class="text-center">工号</th>
		     					<th class="text-center">邮箱地址</th>
		     					<th class="text-center">联系电话</th>
		     				</tr>
		     				<tr>
		     					<td>张三</td>
		     					<td>20101010</td>
		     					<td>zhangsan1@csrzic.com</td>
		     					<td>18810101010</td>
		     				</tr>
		     				<tr>
		     					<td>王五</td>
		     					<td>20101010</td>
		     					<td>zhangsan2@csrzic.com</td>
		     					<td>18810101010</td>
		     				</tr>
		     				<tr>
		     					<td>老王</td>
		     					<td>20101010</td>
		     					<td>zhangsan3@csrzic.com</td>
		     					<td>18810101010</td>
		     				</tr>
		     				<tr>
		     					<td>小三</td>
		     					<td>20101010</td>
		     					<td>zhangsan4@csrzic.com</td>
		     					<td>18810101010</td>
		     				</tr>			     						     				
		     			</table> 
	     			</div> 	
     			</div>  
     			<div class="consignee">
     				<div class="c-name">
     					收件人
	     			</div>
	     			<div class="c-names">
						<span class="color-w email-name" id="sjrSpan"></span>
					</div>
     			</div>
     			<div class="sure-btn">
	     			<span class="btn-white " id="send">确定</span>
	     			<span class="btn-white " id="esc">取消</span>	
     			</div>	    
			</div>
			<div class="layer-body2" style="display:none">
				<img class="sending" src="${path }/resource/images/zzfs.png"><br><br>
				<span class="color-w">正在发送</span>
			</div>
			<div class="layer-body3" style="display:none">
				<img src='${path }/resource/images/fswc.png'><br><br>
				<span class="color-w">发送成功</span>
			</div>
		</div>
	</div>



	
</body>
<script type="text/javascript" src="${path}/resource/js/webSocketConf.js"></script>	
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>   
<script type="text/javascript" >

/*弹窗*/
var dataUrl;
$(function(){
	$("#example1").on("click", function(event) {
		event.preventDefault();
		html2canvas(document.body, {
			allowTaint: true,
		    taintTest: false,
		    onrendered: function(canvas) {
		        canvas.id = "mycanvas";
		        //document.body.appendChild(canvas);
		        //生成base64图片数据
		        dataUrl = canvas.toDataURL();
		      	dataUrl = dataUrl.substring(dataUrl.indexOf(',') + 1, dataUrl.length);
		      	
		      	$(".layer").show();
				initMailUserList();
		    }
		});
	});
	
	$("#esc").click(function(){
		$(".layer").hide();
		$("#layerRequire").val("");
		$('#sjrSpan').text("");
		
	});
	$("#esc2").click(function(){
		$(".layer").hide();
		$("#layerRequire").val("");
		$('#sjrSpan').text("");
		$('.layer-body').show();
		$('.layer-body3').hide();
		$('.layer-body2').hide();
	});
	
	$("#mailList").on("click",'tr',function(){
		if($(this).hasClass('selected')){
			$(this).removeClass('selected');
			var allName=$(".email-name").text()
			var name=$(this).children('td').eq(0).text()+','			
			allName=allName.replace(name,"");
			$(".email-name").text(allName);
			
		}else{
			$(this).addClass('selected');
			var name=$(this).children('td').eq(0).text()+','
			console.log($(this).children('td').eq(0).text());
			var emailname = $(".email-name")[0].textContent;
			if(emailname.indexOf(name) == -1) {
				$(".email-name").append(name);
			}
		} 			
	})

	$("#send").click(function(){
		var nameArr = new Array()
		$(".selected").each(function(){
			nameArr.push($(this).children('td').eq(2).text())
		});
		console.log(nameArr);
		$(".layer-body").hide();
		$(".layer-body2").show();
		$.ajax({
			type : 'POST',
			url : '<%=path%>/monitor/managermesspush',
			data : {
				receiver : nameArr.join(";"),
				mailtheme : '设备能效分析报告',
				mailcontent : '设备能效分析报告',
				fileString : dataUrl,
				fileFormat : 'png'
			},
			dataType : 'json',
			async : true,
			success : function(result) {
				if(result.status == 'OK') {
					if(result.data != null && result.data.resultCode == "1") {
						//alert(result.data.resultMessage);
						$(".layer-body2").hide();
						$(".layer-body3").show();
					} else {
						alert(result.data.resultMessage);
					}
				} else {
					alert("邮件发送失败！");
				}
			}
		});
	    
	    
		$("#layerRequire").val("");
		$('#sjrSpan').text("");
	})
});

function layerSearch() {
	initMailUserList();
}

function initMailUserList() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/monitor/mailUserList',
		data : {
			require : $("#layerRequire").val(),
			type : $('input:radio[name="identity"]:checked').val()
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == "OK") {
				$('#mailList').text('');
				var html = '<tr class="color-m2"><th class="text-center">姓名</th>'+
							'<th class="text-center">工号</th>'+
								'<th class="text-center">邮箱地址</th>'+
								'<th class="text-center">联系电话</th></tr>';
				$.each(result.data, function(i){
					
					html += '<tr><td>'+result.data[i].userName+'</td>'+
							'<td>'+result.data[i].userId+'</td>'+
	     					'<td>'+result.data[i].mail+'</td>'+
	     					'<td>'+result.data[i].phone+'</td></tr>';
	     				
				});
				$('#mailList').append(html);
			}
		},
		error : function() {
			//alert("系统错误！");
		}
	});
}

</script>
<script type="text/javascript">
	function convertNumber(str, length) {
		
		if(str.indexOf(".") > 0) {
			str = str.substring(0,length +1);
		} else {
			str = str.substring(0,length);
		}
		return str;
	}
	
	var PowerTodayOption = {
	    grid: {
	    	top : '20%',
	        bottom: '20%',
	        left: '15%',
	        right: '10%'
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            name : '(h)',
	            nameTextStyle : {
		    		color : '#fff'
		    	},
	            axisLine : {
	         	   show : true,
	         	   lineStyle : {
	         		   type : 'dashed'
	         	   }
	            },
	            axisTick: {
		            show: false
		        },
		        axisLabel: {
		        	show : true,
		        	textStyle: {
		                color: '#fff'
		            }
		        },
		        splitLine : {
		        	show : false
		        },
	            data : []
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name : '(kW)',
	            nameTextStyle : {
		    		color : '#fff'
		    	},
	            axisLine : {
	         	   show : true,
	         	   lineStyle : {
	         		   type : 'dashed'
	         	   }
	            },
	            axisLabel: {
		            textStyle: {
		                color: '#fff'
		            }
	            },
	            splitLine : {
	                lineStyle : {
	                    type : 'dashed'
	                }
	            }
	        }
	    ],
	    series : [
	        {
	            name:'邮件营销',
	            type:'line',
	            stack: '总量',
	            lineStyle : {
	                normal : {
	                    color : '#3a8fd8'
	                }
	            },
	            itemStyle : {
	            	normal : {
	            		opacity : 0
	                }
	            },
	            areaStyle: {
	                normal: { 
	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, 
	                        [{
	                          offset: 0, color: 'rgba(0,0,0,0)' // 0% 处的颜色
	                        }, {
	                          offset: 1, color: '#3a8fd8' // 100% 处的颜色
	                        }], false)
	                }
	            },
	            data:[]
	        }
	    ]
	};
	
	var HaoNengOption = {
	    grid: {
	    	top : '5%',
	        bottom: '20%',
	        left: '20%',
	        right: '20%'
	    },
	    xAxis: {
	    		splitNumber: 3 ,
		        type: 'value',
		        name : '（kWh）',
		    	nameTextStyle : {
		    		color : '#fff'
		    	},
	            axisLine : {
	         	   show : true,
	         	   lineStyle : {
	         		   type : 'dashed',
	         		   color:'#337ab7'
	         	   }
	            },
	            axisLabel: {
	            	show : true,
	            	textStyle:{
		        		color : '#fff'
		        	}
	            },
	            axisTick : {
	            	show : false
	            }
		    },
	    yAxis: {
	    	
	        type: 'category',
	        axisLine: {
	            show: true,
	            lineStyle:{
	            	type:'dashed',
	            	color:'#337ab7'
	            }
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	        	show : true,
	        	textStyle:{
	        		color : '#fff'
	        	}
	        },
	        splitLine : {
	        	show : false
	        },
	        
	        data: ['普通定频','永磁变频','异步变频']
	    },
	    series: [
	        {
	            name: '2011年',
	            type: 'bar',
	            barWidth : '10',
	            data: [20000, 23489, 18203]
	        }
	    ]
	};
	
	var DayCostOption = {
		grid : {
	    	top : '10%',
	    	bottom : '20%',
	    	left : '10%',
	    	right : '17%'
	    },
	    xAxis : {
	    	name : '（日）',
	    	nameGap : '0',
	    	nameTextStyle : {
	    		color : '#fff'
	    	},
            axisLine : {
         	   show : false
            },
            axisTick : {
            	show : false
            },
	        axisLabel: {
	            textStyle: {
	                color: '#fff'
	            }
	        },
            data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15',
	               '16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
	    },
		yAxis : {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	        	show : false
	        },
	        splitLine : {
	        	show : false
	        }
	    },
	    series : [
  	        {
  	            type: 'bar',
  	            label : {
  	            	normal : {
  	            		show : true,
  	            		position : 'top'
  	            	}
  	            },
  	            itemStyle: {
  	                normal: {
  	                    color: new echarts.graphic.LinearGradient(
  	                        0, 0, 0, 1,
  	                        [
  	                            {offset: 0, color: '#188df0'},
  	                           
  	                            {offset: 1, color: 'rgba(255,255,255,0)'}
  	                        ]
  	                    )
  	                }
  	            },
  	            barWidth : '10',
  	            data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15',
  	                   '16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
  	        }
  	    ]
	};
	var MonthCostOption = {
		
		grid : {
	    	top : '5%',
	    	bottom : '20%',
	    	left : '20%',
	    	right : '15%'
	    },
	    xAxis : {
	    	name : '（月）',
	    	nameGap : '0',
	    	nameTextStyle : {
	    		color : '#fff'
	    	},
            axisLine : {
         	   show : false
            },
            axisTick : {
            	show : false
            },
	        axisLabel: {
	            textStyle: {
	                color: '#fff'
	            }
	        },
            data: ['01','02','03','04','05','06','07','08','09','10','11','12']
	    },
		yAxis : {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	        	show : false
	        },
	        splitLine : {
	        	show : false
	        }
	    },
	    series : [
    	        {
    	            type: 'bar',
    	            label : {
    	            	normal : {
    	            		show : true,
    	            		position : 'top'
    	            	}
    	            },
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#188df0'},
    	                            
    	                            {offset: 1, color: 'rgba(255,255,255,0)'}
    	                        ]
    	                    )
    	                }
    	            },
    	            barWidth : '10',
    	            data: ['01','02','03','04','05','06','07','08','09','10','11','12']
    	        }
    	    ]
	};
	
	var fenxiEchartsOption = {
		grid : {
	    	top : '15%',
	    	bottom : '25%',
	    	left : '20%',
	    	right : '10%'
	    },
	    xAxis : {
            axisLine : {
         	   show : false
            },
            axisTick : {
            	show : false
            },
	        axisLabel: {
	            textStyle: {
	                color: '#fff'
	            }
	        },
            data: ['昨日能耗','本日能耗']
	    },
		yAxis : {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	        	show : false
	        },
	        splitLine : {
	        	show : false
	        }
	    },
	    label : {
        	normal : {
        		show : true,
        		position : 'top',
        		formatter : '{c}kWh'
        	},
        	emphasis : {
        		show : true,
        		position : 'top',
        		formatter : '{c}kWh'
        	}
        },
	    series : [
    	        {
    	            type: 'bar',
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#188df0'},
    	                            
    	                            {offset: 1, color: 'rgba(255,255,255,0)'}
    	                        ]
    	                    )
    	                }
    	            },
    	            barWidth : '50',
    	            data: ['100','150']
    	        }
    	    ]
	};
	
	Array.prototype.contains = function ( needle ) {
		for (i in this) {
			if (this[i] == needle) return true;
		}
		return false;
	}
</script>
<script type="text/javascript">

$(function(){
	$(".img-qbsb").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
	$(".img-qbsb").parent().parent().addClass("dl-active");
	$(".img-qbsb").attr("src","${path}/resource/images/qbsb2.png"); 
	
	initContribution();
	initPowerToday();
	initDayMonthCost();
	
	secondhistDataPowerMax();
	secondhistDataCost();
})	

	
	var HaoNengEcharts = echarts.init(document.getElementById("HaoNengEcharts"));
	HaoNengEcharts.setOption(HaoNengOption);
	
	//社会贡献值
	function initContribution() {
		$.ajax({
			url : '<%=path%>/manage/secondhistDataContribution',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	if(result.status == "OK") {
		        	var coSave = result.data.coSave.toString();
		        	coSave = convertNumber(coSave, 6);
					$('#coSave').text(coSave);
					
					var tinySave = result.data.tinySave.toString();
					tinySave = convertNumber(tinySave, 6);
					$('#tinySave').text(tinySave);
		        	
		        	var electSave = result.data.electSave.toString();
		        	electSave = convertNumber(electSave, 6);
					$('#electSave').text(electSave);
					
					var coalSave = result.data.coalSave.toString();
					coalSave = convertNumber(coalSave, 6);
					$('#coalSave').text(coalSave);
					
					var soSave = result.data.soSave.toString();
					soSave = convertNumber(soSave, 6);
					$('#soSave').text(soSave);
					
					var treeSave = result.data.treeSave.toString();
					treeSave = convertNumber(treeSave, 6);
					$('#treeSave').text(treeSave);
					
					HaoNengOption.series[0].data = [
					        { value : result.data.normal, itemStyle: { normal : {color : '#FF9800'}}}, 
					        { value : result.data.asynchronous, itemStyle: { normal : {color : '#337ab7'}}}, 
					        { value : result.data.pmg, itemStyle: { normal : {color : '#0dff16'}}}];
					HaoNengEcharts.setOption(HaoNengOption);
	        	}
			},			
			error : function(result) {
				console.error('error');
			}
		});	
	}
	
	var PowerTodayEcharts = echarts.init(document.getElementById("PowerTodayEcharts"));
	PowerTodayEcharts.setOption(PowerTodayOption);
	//当前电量
	function initPowerToday() {
		$.ajax({
			url : '<%=path%>/manage/secondhistDataPowerToday',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log('secondhistDataPowerToday:');console.log(result);
	        	if(result.status == "OK") {
	        		var PowerTodayxAxis = [];
	        		var PowerTodayData = [];
	        		
	        		var nowtime = new Date();
	        		var nowhour = nowtime.getHours(); //小时
	        		for(var time in result.data) {
	        			var datahour = time.split(" ")[1].split(":")[0];
	        			if(datahour >= nowhour) {
	        			PowerTodayxAxis.push(time);
	        			PowerTodayData.push(result.data[time]);
	        			}
	        		}
	        		PowerTodayOption.xAxis.data = PowerTodayxAxis;
	        		PowerTodayOption.series[0].data = PowerTodayData;
	        		PowerTodayEcharts.setOption(PowerTodayOption);
	        	}
	        },			
			error : function(result) {
				console.error('error');
			}
		});
	}
	
	//本月电量
	var DayCostEcharts = echarts.init(document.getElementById("DayCostEcharts"));
	DayCostEcharts.setOption(DayCostOption);
	//本年电量
	var MonthCostEcharts = echarts.init(document.getElementById("MonthCostEcharts"));
	MonthCostEcharts.setOption(MonthCostOption);
	
	function initDayMonthCost() {
		$.ajax({
			url : '<%=path%>/manage/secondhistDataDayCost',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log('secondhistDataDayCost:');console.log(result);
	        	if(result.status == "OK") {
	        		var DayCostTemp = {};
	        		var DayCostName = [];
	        		var allCost = 0;
	        		$.each(result.data, function(i) {
	        			allCost += result.data[i].cost;
	        			var cost = result.data[i].cost.toString();
	        			if(cost.indexOf('.') > 2) {
	        				DayCostTemp[result.data[i].date] = cost.substring(0,cost.indexOf('.') - 2);
	        			} else {
       						DayCostTemp[result.data[i].date] = cost.substring(0,cost.indexOf('.'));
	        			}
       					DayCostName.push(result.data[i].date);
	        		});
	        		var allCostStr = allCost.toString();
	        		if(allCostStr.indexOf('.') > 2) {
	        			allCost = parseInt(allCostStr.substring(0,allCostStr.indexOf('.') - 2));
	        		} else if(allCostStr.indexOf('.') > 0) {
	        			allCost = parseInt(allCostStr.substring(0,allCostStr.indexOf('.')));
	        		}
   					
	        		var DayCostData = [];
	        		$.each(DayCostOption.xAxis.data, function(i) {
	        			if(!DayCostName.contains(DayCostOption.xAxis.data[i])) {
	        				DayCostData.push({
	        					name : DayCostOption.xAxis.data[i],
	   	        				value : 0
	        				});
	        			} else {
	        				DayCostData.push({
	        					name : DayCostOption.xAxis.data[i],
	   	        				value : DayCostTemp[DayCostOption.xAxis.data[i]]
	        				});
	        			}
	        		});
	        		DayCostOption.series[0].data = DayCostData;
	        		DayCostEcharts.setOption(DayCostOption);
	        		
	        		$('#dayCostSum').text(allCost);
	        	}
	        },			
			error : function(result) {
				console.error('error');
			}
		});
	        
		$.ajax({
			url : '<%=path%>/manage/secondhistDataMonthCost',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log('secondhistDataMonthCost:');console.log(result);
	        	if(result.status == "OK") {
	        		var MonthCostTemp = {};
	        		var MonthCostName = [];
	        		var allCost = 0;
	        		$.each(result.data, function(i) {
	        			//allCost += result.data[i].cost;
	        			var cost = result.data[i].cost.toString();
	        			if(cost.indexOf('.') > 2) {
	        				MonthCostTemp[result.data[i].date] = cost.substring(0,cost.indexOf('.') - 2);
	        				allCost += parseInt(cost.substring(0,cost.indexOf('.') - 2));
	        			} else if(cost.indexOf('.') > 0) {
	        				MonthCostTemp[result.data[i].date] = cost.substring(0,cost.indexOf('.'));
	        				allCost += parseInt(cost.substring(0,cost.indexOf('.')));
	        			}
       					
       					MonthCostName.push(result.data[i].date);
       					
	        		});
	        		var MonthCostData = [];
	        		$.each(MonthCostOption.xAxis.data, function(i) {
	        			if(!MonthCostName.contains(MonthCostOption.xAxis.data[i])) {
	        				MonthCostData.push({
	        					name : MonthCostOption.xAxis.data[i],
	   	        				value : 0
	        				});
	        			} else {
	        				MonthCostData.push({
	        					name : MonthCostOption.xAxis.data[i],
	   	        				value : MonthCostTemp[MonthCostOption.xAxis.data[i]]
	        				});
	        			}
	        		});
	        		MonthCostOption.series[0].data = MonthCostData;
	        		MonthCostEcharts.setOption(MonthCostOption);
	        		
	        		$('#monthCostSum').text(allCost);
	        	}
	        },			
			error : function(result) {
				console.error('error');
			}
		});
	}
	
	//耗电概况
	function secondhistDataPowerMax() {
		$.ajax({
			url : '<%=path%>/manage/secondhistDataPowerMax',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log(result);
	        	if(result.status == "OK") {
// 	        		var daycost = 100, monthcost = 2100, yearcost = 10000;
	        		var dayMax = result.data.dayMax;
	        		var monthMax = result.data.monthMax;
	        		var yearMax = result.data.yearMax;
	        		dayMax = dayMax.substring(dayMax.indexOf('=') + 1, dayMax.length - 1);
	        		monthMax = monthMax.substring(monthMax.indexOf('=') + 1, monthMax.length - 1);
	        		yearMax = yearMax.substring(yearMax.indexOf('=') + 1, yearMax.length - 1);
	        		
	        		if(yearMax != 0) {
	        			$('#dayMaxpro').css("width", 100*(dayMax/yearMax) + '%');
	        			$('#monthMaxpro').css("width", 100*(monthMax/yearMax) + '%');
	        			$('#yearMaxpro').css("width", '100%');
	        		}
	        		$('#dayMax').text(dayMax + 'kW');
	        		$('#monthMax').text(monthMax + 'kW');
	        		$('#yearMax').text(yearMax + 'kW');
	        	}
	        },			
			error : function(result) {
				console.error('error');
			}
		});
	}
	
	var fenxiEcharts = echarts.init(document.getElementById("fenxiEcharts"));
	fenxiEcharts.setOption(fenxiEchartsOption);
	
	//设备电费统计
	function secondhistDataCost() {
		$.ajax({
			url : '<%=path%>/manage/secondhistDataCost',
			data : { serialNum : '${serialNum}' },
			//data : {serialNum : '49140135'},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log(result);
	        	if(result.status == "OK") {
// 	        		var daycost = 100, monthcost = 2100, yearcost = 10000;
	        		var daycost = result.data.daycost;
	        		var monthcost = result.data.monthcost;
	        		var yearcost = result.data.yearcost;
	        		
	        		if(yearcost != 0) {
	        			$('#daycostpro').css("width", 100*(daycost/yearcost) + '%');
	        			$('#monthcostpro').css("width", 100*(monthcost/yearcost) + '%');
	        			$('#yearcostpro').css("width", '100%');
	        		}
	        		$('#daycost').text(daycost + '元');
	        		$('#monthcost').text(monthcost + '元');
	        		$('#yearcost').text(yearcost + '元');
	        		
	        		fenxiEchartsOption.series[0].data = [result.data.lastday, result.data.today];
	        		fenxiEcharts.setOption(fenxiEchartsOption);
	        		
	        		var jutifenxiText = '';
	        		if(result.data.lastday > result.data.today) {
	        			jutifenxiText = '下降' + (result.data.lastday - result.data.today) + 'kWh';
	        		} else if(result.data.lastday < result.data.today) {
	        			jutifenxiText = '上升' + (result.data.today - result.data.lastday) + 'kWh';
	        		} else {
	        			jutifenxiText = '无变化';
	        		}
	        		$('#jutifenxi').text(jutifenxiText);
	        	}
	        },			
			error : function(result) {
				console.error('error');
			}
		});
	}
	
	//加载右侧列表
	function search() {
		$.ajax({
			type : 'POST',
			url : '<%=path%>/manage/seconddevTotal',
			data : {
				livedata : livedata,
				require : $("#require").val()
			},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == "OK") {
					$('#listtable').text('');
					//var html = "<tr><th>变频器序列号</th><th>安装位置</th><th>投运时间</th><th>工作状态</th></tr>";
					var html = "";
					$.each(result.data, function(i){
						var href = "<%=path%>/manage/redirect/allEquip/nowEquip?serialNum="+result.data[i].serialNum;
						html += '<tr><td class="left"><a href='+href+'>'+result.data[i].serialNum +
								'</a></td><td class="right">'+result.data[i].state +'</td></tr>';
					});
					$('#listtable').append(html);
				}
			},
			error : function() {
				//alert("系统错误！");
			}
		})
	}
//获取设备列表实时数据
	
	var webSocket2 = null;
    var livedata;
    if ("WebSocket" in window) {
		webSocket2 = new WebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else if ("MozWebSocket" in window) {
		webSocket2 = new MozWebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else {
		alert("浏览器不支持！");
	}
	webSocket2.onerror = function() {
		alert("无法建立实时连接！");
	};
	webSocket2.onopen = function(event) {
		send2();
		console.log("open");
	};
	webSocket2.onmessage = function() {
		if(event.data.length>2){
			livedata=event.data;
			//tableinitinfo();
			search();
			webSocket2.close();
		}else{
			console.log("resend...");
			send2();
		}		
	};
	webSocket2.onclose = function() {
	};
	window.onbeforeunload = function() {
		webSocket2.close();
	};
	function send2(){    //Websocket接口
	    console.log("send");
// 	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"breakerstate\",\"runninglight\",\"faultlight\"]}]";//调用参数
		var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"c196\",\"c78\",\"c77\"]}]";//调用参数
	    webSocket2.send(message);
	}

</script>
</html>